<template>
  <div>
    <!-- 面包屑内容 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/course/video'}">课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 章 -->
    <el-table
        border
        style="width:100%"
        :data="this.chapterList"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
              :data="props.row.episode_list"
              border
              style="width:100%">
            <el-table-column type="index"></el-table-column>
            <el-table-column
                prop="title"
                label="集名">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="上架时间">
            </el-table-column>

            <el-table-column
                prop="level"
                label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size='small' @click="editEpisodelist(scope.row)" >编辑
                </el-button>
                <el-button type="danger" icon="el-icon-delete" size='small' @click="removeEpisode(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

      </el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column
          prop="title"
          label="章名">
      </el-table-column>
      <el-table-column
          prop="create_time"
          label="上架时间">
      </el-table-column>

      <el-table-column
          prop="level"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size='small' @click="editChapterlist(scope.row)" >编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size='small' @click="removeChapter(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑章diaolog对话框 -->
    <el-dialog align="left" title="修改章信息" :visible.sync="editChapterVisible" width="50%">
      <!--主体部分 -->
      <el-form label-width="150px"
               :model="chapterInfo">
        <el-form-item label="章标题" prop="title">
          <el-input
              v-model="chapterInfo.title"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="ordered">
          <el-input-number
              v-model="chapterInfo.ordered"
              controls-position="right"
              @change="handleChange" :min="1" :max="10">
          </el-input-number>
        </el-form-item>
        <el-form-item label="上架时间"  prop="create_time">
          <el-col :span="3">
            <el-date-picker
                v-model="chapterInfo.create_time"
                type="datetime"
                placeholder="选择日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
      		<el-button @click="editChapterVisible = false">取 消</el-button>
      		<el-button type="primary" @click="editChapter">确 定</el-button>
      	</span>
    </el-dialog>

    <!-- 编辑集diaolog对话框 -->
    <el-dialog align="left" title="修改集信息" :visible.sync="editEpisodeVisible" width="50%">
      <!--主体部分 -->
      <el-form label-width="150px"
               :model="episodeInfo">
        <el-form-item label="集标题" prop="title" style="width: 400px">
          <el-input
              v-model="episodeInfo.title"
              autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="ordered" style="width: 200px">
          <el-input-number
              v-model="episodeInfo.ordered"
              controls-position="right"
              @change="handleChange" :min="1" :max="10">
          </el-input-number>
        </el-form-item>
        <el-form-item label="上架时间"  prop="create_time">
          <el-col :span="3">
            <el-date-picker
                v-model="episodeInfo.create_time"
                type="datetime"
                placeholder="选择日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="上传视频" prop="play_url">
          <el-upload
              class="upload-demo"
              action="http://localhost:8089/api/v1/pub/video/getPlayUrl"
              :on-success="handleSuccess"
              v-model="episodeInfo.play_url"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传.mp4文件，且不超过500Mb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      		<el-button @click="editEpisodeVisible = false">取 消</el-button>
      		<el-button type="primary" @click="editEpisode">确 定</el-button>
      	</span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        videoId: 0,
      },
      chapterList: [],
      //章参数
      chapterInfo: {
        title: '',
        ordered: '',
        create_time:'',
        id:''
      },
      //集参数
      episodeInfo: {
        title: '',
        ordered: '',
        play_url: '',
        create_time:'',
        id:''
      },
      //修改章节dialog,控制显示隐藏
      editChapterVisible: false,
      editEpisodeVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  methods: {
    //删除章
    removeChapter(id){
      this.$http.delete(`api/v1/pub/video/removeChapter/${id}`).then((res) => {
        console.log(res);
        if(res.data.code!==0) return this.$message.error("删除失败");
        this.$message.success("删除已选章节成功");
        //刷新列表
        this.getChapterList();
      });
    },
    //删除集
    removeEpisode(id){
      this.$http.delete(`api/v1/pub/video/removeEpisode/${id}`).then((res) => {
        console.log(res);
        if(res.data.code!==0) return this.$message.error("删除失败");
        this.$message.success("删除已选集成功");
        //刷新列表
        this.getChapterList();
      });
    },
    //点击确定发送请求修改章
    editChapter(){
      this.$http.put("api/v1/pub/video/editChapter",this.chapterInfo).then(res=>{
        // console.log(res);
        if(res.data.code!==0) return this.$message.error("修改课程基本信息失败");
        this.$message.success("修改课程基本信息成功");
        this.getChapterList();
        this.editChapterVisible = !this.editChapterVisible;
      })
    },
    //点击确定发送请求修改集
    editEpisode(){
      this.$http.put("api/v1/pub/video/editEpisode",this.episodeInfo).then(res=>{
        // console.log(res);
        if(res.data.code!==0) return this.$message.error("修改课程基本信息失败");
        this.$message.success("修改课程基本信息成功");
        this.getChapterList();
        this.editEpisodeVisible = !this.editEpisodeVisible;
      })
    },
    //编辑章事件
    editChapterlist(item) {
      this.editChapterVisible = !this.editChapterVisible;
      this.chapterInfo = {
        title: item.title,
        ordered: item.ordered,
        id: item.id,
        create_time: item.create_time
      }
    },
    //编辑集事件
    editEpisodelist(item) {
      this.editEpisodeVisible = !this.editEpisodeVisible;
      this.episodeInfo = {
        title: item.title,
        ordered: item.ordered,
        play_url: item.play_url,
        create_time: item.create_time,
        id:item.id
      }
    },
    getChapterList() {
      this.queryInfo.videoId = this.$route.params.id
      this.$http.get("api/v1/pub/video/queryChaEpiByVideoId", {
        params: this.queryInfo
      }).then((res) => {
        console.log(res);
        this.chapterList = res.data.data;

      })
    },
    //排序
    handleChange(value) {
      console.log(value);
    },
    //上传视频
    handleSuccess(response){
      console.log(response)
      this.url=((response.data[0].playURL).split("?"))[0];
      this.addEpisodeForm.play_url=this.url
    }
  },
  mounted() {
    this.getChapterList()
  }

}
</script>

<style scoped>

</style>